<template>
    <div class="page">
        <div class="flexWrap pageTop">
            <div class="flexWrap filter-bar">
                <img src="../../assets/img/filter.png" />
                <span class="title">筛选：</span>
            </div>
            <el-input style="width: 140px; transform:scale(0.9)" size="mini" clearable placeholder="关键字查询" v-model="filter.username" @change="toFilter"/>

            <el-select clearable class="mini-el" style="width: 160px" size="small" v-model="filter.status" placeholder="选择状态"  @change="toFilter">
                <el-option v-for="s in filter.statusAry" :key=s.id :label=s.name :value=s.id />
            </el-select>

            <el-checkbox size="mini" style="transform:scale(0.9);margin: 5px 20px 0 0" v-model="filter.onlyMe" @change="toFilter">只看跟我相关</el-checkbox>

            <el-button type="text" plain size="mini" style="transform:scale(0.8)" icon="el-icon-circle-plus" @click="toCreate">新增</el-button>
            <el-button type="text" plain size="mini" style="transform:scale(0.8)" icon="el-icon-refresh" @click="toFilter">刷新</el-button>
        </div>
        <div class="pageCenter">
            <el-table :data="list" stripe size="small" :cell-style="{padding:'10px 0'}">
                <el-table-column prop="id" label="ID" width="100" />
                <el-table-column prop="content" label="BUG描述" min-width="100" />
                <el-table-column label="状态" width="120">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 1"  type="normal">确认中</el-tag>
                        <el-tag v-else-if="scope.row.status == 2"  type="normal">修复中</el-tag>
                        <el-tag v-else-if="scope.row.status == 3"  type="normal">测试中</el-tag>
                        <el-tag v-else-if="scope.row.status == 4"  type="success">已修复</el-tag>
                        <el-tag v-else-if="scope.row.status == 10"  type="success">无需修改</el-tag>
                        <el-tag v-else  type="danger">未知</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="creatorName" label="创建人" width="100" />
                <el-table-column prop="userNames" label="负责人" width="200" />
                <el-table-column prop="createAtStr" label="创建日期" width="140" />
                <el-table-column prop="deadlineStr" label="截止日期" width="140" />
                <el-table-column label="操作" width="120" >
                    <template slot-scope="scope">
                        <el-button type="text" @click="toEdit(scope.$index, scope.row)">修改</el-button>
                        <el-button v-if="scope.row.demandId" type="text" @click="toEdit(scope.$index, scope.row)">查看需求</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--详情页-->
        <el-dialog :visible.sync="edit.show" top="5vh" width="550px" append-to-body border :show-title=false :show-close=false>
            <bug-edit v-if="edit.show" :info="edit.info" @complete="edit.show = false; fetchList()" />
        </el-dialog>
    </div>
</template>

<script>
import BugEdit from "@/views/bug/components/bugEdit"
export default {
    data: function(){
        return {
            me:{},
            filter:{
                keyword: "",
                status:'', statusAry:[{id:1, name:'确认中'},{id:2, name:'修复中'},{id:3, name:'测试中'},{id:4, name:'已修复'},{id:10, name:'无需修改'}],
            },

            tbl:{total:0, size:20, curr:1},
            list:[],

            edit:{show:false, info:{}},
        }
    },
    components: {
        BugEdit,
    },
    created() {
        this.me = this.auth.getAccount();
        if (this.me.roles && this.me.roles.length > 0) {
            for (let i = 0; i < this.me.roles.length; i++) {
                if (this.me.roles[i] === 1) {
                    this.me.isAdmin = true
                    break
                }
            }
        }

        this.fetchList();

    },
    methods: {
        /**************** 动作 ****************/
        tblCurPageChanged(v) {
            this.tbl.curr = v;
            this.fetchList();
        },
        toFilter() {
            this.fetchList()
        },
        toCreate() {
            this.edit = {show:true, info:{}}
        },
        toEdit(index, row) {
            this.edit = {show:true, info: {...row}}
        },

        fetchList() {
            let params = {
                size:this.tbl.size, page:this.tbl.curr,
                status:this.filter.status, keyword:this.filter.keyword
            }
            this.request.get({
                url: "bug.list",
                data: params
            }).then(res => {
                this.list = res.result;
                this.tbl.total = (res && res.totalCount) ? res.totalCount : this.list.length;

                for(let i = 0; i < this.list.length; i ++) {
                    this.list[i] = this.format.bug(this.list[i])
                }
            },res => {
                this.$message.error(res.msg || "获取数据失败~");
            })
        }
    }
}
</script>

<style scoped>

</style>
